<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Flex Items: align-content</title>


  <style contenteditable>
    head {
      display: block;
    }
    style#editme {
      display: block;
      -webkit-user-modify: read-write-plaintext-only;
      white-space: pre-wrap;
      padding: 1ch 2ch; margin: 2ch;
      border: 0.25ch solid rgba(0,0,0,0.33);
      border-radius: 1ch;
      background-color: hsl(120,20%,90%);
      font: 1.2rem Consolas, "Courier New", Courier, monospace;
      max-height: 50vh;
      overflow: auto;
    }
    style#editme::before {
      content: "Editable CSS";
      display: block;
      margin: -1ch -2ch 1em;
      padding: 0.75ch 1ch 0.25ch;
      background: rgba(0,42,0,0.15);
      color: #666;
      border-bottom: 2px solid rgba(0,0,0,0.33);
      font-weight: bold;
      font-family: sans-serif;
      text-align: center;
    }

    body {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 1.2em;
      padding: 1em;
    }
    body * {
      font-family: "Myriad Pro",Myriad,"Liberation Sans","Nimbus Sans L","Helvetica Neue";
    }
    style,
    div > div {
      font-family: "ubuntu mono", Consolas, monospace;
    }

    html {
  font-size: 1.6em;
} 
  body {  
  font-size: 25px;
  text-align: center;
  padding: 100px;
} 
  div, 
  div > p {
  background-color: rgba(0,0,0,0.1);
} 
article > div {
  display: flex;
  flex-direction: row;
  border: 1px dashed;
} 
  div > p {
  border: 1px solid; 
  margin: 5px; 
  padding: 5px;
}  
p {
  margin: 0 -20px 40px;
} 
div p {
  margin: 5px;
} 
div p:nth-of-type(1) {
  font-size: 1.4rem;
}
div p:nth-of-type(2) {
  font-size: 1.2rem;
}
div p:nth-of-type(3) {
  font-size: 1.0rem;
}
div p:nth-of-type(4) {
  font-size: 0.8rem;
}
div p:nth-of-type(5) {
  font-size: 0.7rem;
}
</style>
</head>
<body> 
<article>
  
  <div style="align-items: flex-start;">
    <p>
      One
    </p>
    <p>
      Two<br/>
      Two
    </p>
    <p>
      Three<br/>
      Three<br/>
      Three
    </p>
    <p>
      Four<br/>
      Four<br/>
      Four<br/>
      Four
    </p>
    <p>
      Five<br/>
      Five<br/>
      Five<br/>
      Five<br/>
      Five
    </p>
  </div>

  <p>align-items: flex-start; 往垂轴起边对齐⤴</p>

</article>




<article>
  
  <div style="align-items: flex-end;">
    <p>
      One
    </p>
    <p>
      Two<br/>
      Two
    </p>
    <p>
      Three<br/>
      Three<br/>
      Three
    </p>
    <p>
      Four<br/>
      Four<br/>
      Four<br/>
      Four
    </p>
    <p>
      Five<br/>
      Five<br/>
      Five<br/>
      Five<br/>
      Five
    </p>
  </div>
  <p>align-items: flex-end;往垂轴终边对齐 ⤴</p>
</article>




<article>
  

  <div style="align-items: center;">
    <p>
      One
    </p>
    <p>
      Two<br/>
      Two
    </p>
    <p>
      Three<br/>
      Three<br/>
      Three
    </p>
    <p>
      Four<br/>
      Four<br/>
      Four<br/>
      Four
    </p>
    <p>
      Five<br/>
      Five<br/>
      Five<br/>
      Five<br/>
      Five
    </p>
  </div>

  <p>align-items: center;剧中 ⤴</p>
</article>




<article>
  

  <div style="align-items: baseline;">   
    <p>
      One
    </p>
    <p>
      Two<br/>
      Two
    </p>
    <p>
      Three<br/>
      Three<br/>
      Three
    </p>
    <p>
      Four<br/>
      Four<br/>
      Four<br/>
      Four
    </p>
    <p>
      Five<br/>
      Five<br/>
      Five<br/>
      Five<br/>
      Five
    </p>
  </div>

  <p>align-items: baseline; ⤴</p>
</article>




<article>
  

 
  <div style="align-items: stretch;">    
    <p>
      One
    </p>
    <p>
      Two<br/>
      Two
    </p>
    <p>
      Three<br/>
      Three<br/>
      Three
    </p>
    <p>
      Four<br/>
      Four<br/>
      Four<br/>
      Four
    </p>
    <p>
      Five<br/>
      Five<br/>
      Five<br/>
      Five<br/>
      Five
    </p>
  </div>

  <p>align-items: stretch; ⤴</p>
</article>
  
</body>
</html>